<template>
  <div class="addKeyanPage">
    <div>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>项目审批</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/home/shenpi/keyan' }">项目中长期</el-breadcrumb-item>
        <el-breadcrumb-item>查看</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="head">
      <h3 class="title">{{info.projectName}}</h3>
      <ul class="tag">
        <li>
          <span>项目编号：</span>
          <i>{{info.projectNo}}</i>
        </li>
        <li>
          <span>提交人：</span>
          <i>{{info.creatorName}}</i>
        </li>
        <li>
          <span>创建时间：</span>
          <i>{{info.createTime}}</i>
        </li>
        <li>
          <el-button type="primary" @click="toUpdate(info.projectId)">编辑</el-button>
        </li>
      </ul>
    </div>
    <div class="basicInfo">
      <h3 class="title">
        <i></i>
        基本信息
      </h3>
      <el-row>
        <el-col :span="12">
          <label>项目名称</label>
          <span>{{info.projectName}}</span>
        </el-col>
        <el-col :span="12">
          <label>项目编号</label>
          <span>{{info.projectNo}}</span>
        </el-col>
        <el-col :span="12">
          <label>项目编码</label>
          <span>{{info.uniqueCityCode}}</span>
        </el-col>
        <el-col :span="12">
          <label>项目总投资</label>
          <span>{{info.totalProjectInvestment}}</span>
        </el-col>
        <el-col :span="12">
          <label>计划开始时间</label>
          <span>{{info.planBeginTime}}</span>
        </el-col>
        <el-col :span="12">
          <label>计划截止时间</label>
          <span>{{info.planEndTime}}</span>
        </el-col>
        <el-col :span="12">
          <label>建设地点</label>
          <span>{{info.constructionSite}}</span>
        </el-col>
        <el-col :span="12">
          <label>联系人</label>
          <span>{{info.projectContact}}</span>
        </el-col>
        <el-col :span="12">
          <label>联系人邮箱</label>
          <span>{{info.projectContactEmail}}</span>
        </el-col>
        <el-col :span="12">
          <label>联系人电话</label>
          <span>{{info.projectContactMobile}}</span>
        </el-col>
        <el-col :span="12">
          <label>国标行业编码</label>
          <span>{{info.industryCoding}}</span>
        </el-col>
        <el-col :span="12">
          <label>国标行业名称</label>
          <span>{{info.industryName}}</span>
        </el-col>
        <el-col :span="12">
          <label>是否开发区项目</label>
          <span>{{info.isDevelopment == 1 ? '是' : '否'}}</span>
        </el-col>
        <el-col :span="12">
          <label>开发区名称</label>
          <span>{{info.developmentName}}</span>
        </el-col>
        <el-col :span="12">
          <label>产业结构编码</label>
          <span>{{info.industrialStructureCode}}</span>
        </el-col>
        <el-col :span="12">
          <label>产业结构名称</label>
          <span>{{info.industrialStructureName}}</span>
        </el-col>
        <el-col :span="12">
          <label>行政区划编码</label>
          <span>{{info.administrativeDivisionCode}}</span>
        </el-col>
        <el-col :span="12">
          <label>行政区划名称</label>
          <span>{{info.administrativeDivisionName}}</span>
        </el-col>
        <el-col :span="12">
          <label>工程分类编码</label>
          <span>{{info.projectClassificationCode}}</span>
        </el-col>
        <el-col :span="12">
          <label>工程分类名称</label>
          <span>{{info.projectClassificationName}}</span>
        </el-col>
        <el-col :span="12">
          <label>立项类型编码</label>
          <span>{{info.approvalTypeCode}}</span>
        </el-col>
        <el-col :span="12">
          <label>立项类型名称</label>
          <span>{{info.approvalTypeName}}</span>
        </el-col>
        <el-col :span="12">
          <label>项目资金属性编码</label>
          <span>{{info.fundAttributeCode}}</span>
        </el-col>
        <el-col :span="12">
          <label>项目资金属性名称</label>
          <span>{{info.fundAttributeName}}</span>
        </el-col>
        <el-col :span="12">
          <label>项目建设性质编码</label>
          <span>{{info.constructionNatureCode}}</span>
        </el-col>
        <el-col :span="12">
          <label>项目建设性质名称</label>
          <span>{{info.constructionNatureName}}</span>
        </el-col>
        <el-col :span="12">
          <label>项目类别编码</label>
          <span>{{info.itemCategoryCode}}</span>
        </el-col>
        <el-col :span="12">
          <label>项目类别名称</label>
          <span>{{info.itemCategoryName}}</span>
        </el-col>
        <el-col :span="24">
          <label class="other">附件</label>
          <span></span>
        </el-col>
        <el-col :span="24">
          <label class="other">建设内容</label>
          <span>{{info.remark}}</span>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: 'viewkeyan',
  components: {},
  data () {
    return {
      info: {}
    }
  },
  computed: {
    id () {
      return this.$route.query.id
    }
  },
  created () {
    this.getDetail()
  },
  methods: {
    // 回显数据
    getDetail () {
      this.axios.get('/mediumLongTermpm/getOne', {
        params: {
          id: this.id
        }
      }).then(res => {
        if (res.code !== 1000) {
          this.$message.error(res.message)
        }
        this.info = res.data
      })
    },
    // 编辑
    toUpdate (item) {
      let viewUrl = '/home/tongchou/ZCQxiangmuAdd?id=' + this.id
      this.$router.push(viewUrl)
    },
    getProjectName (_state) {
      let state = Number(_state)
      let stateStr = ''
      if (state === 1) {
        stateStr = '全市发展规划'
      } else if (state === 2) {
        stateStr = '专项发展规划'
      } else if (state === 3) {
        stateStr = '软件开发'
      } else if (state === 4) {
        stateStr = '系统集成'
      } else if (state === 5) {
        stateStr = '民政局'
      } else if (state === 6) {
        stateStr = '公安局'
      } else if (state === 7) {
        stateStr = '财政局'
      } else if (state === 8) {
        stateStr = '国税局'
      } else if (state === 9) {
        stateStr = '土地局'
      }
      return stateStr
    }
  }
}
</script>

<style lang="less" scoped>
.addKeyanPage {
  .head {
    margin: 20px 0;
    padding: 20px;
    background-color: #fff;

    .title {
      font-size: 24px;
      font-weight: bold;
      color: rgba(51, 51, 51, 1);
    }

    .tag {
      display: flex;
      color: #999;
      margin-top: 10px;

      i {
        font-style: initial;
        color: #333;
      }

      li {
        margin-right: 40px;
      }
    }
  }

  .basicInfo {
    padding: 20px;
    background-color: #fff;

    .title {
      font-size: 18px;
      font-weight: bold;
      color: rgba(51, 51, 51, 1);
      display: flex;
      align-items: center;
      margin-bottom: 20px;

      i {
        width: 4px;
        height: 16px;
        display: inline-block;
        background-color: #4967cf;
        margin-right: 6px;
      }
    }

    .el-row {
      border: 1px solid rgba(238, 238, 238, 1);
      border-bottom: none;

      .el-col {
        border-bottom: 1px solid rgba(238, 238, 238, 1);
      }
    }

    label {
      height: 40px;
      line-height: 40px;
      display: inline-block;
      width: 150px;
      background-color: #fafafa;
      text-align: right;
      padding-right: 14px;
      color: #999999;
    }

    .other {
      height: 80px;
    }

    span {
      height: 40px;
      padding-left: 15px;
      color: #333;
    }
  }
}
</style>
